import Seo from '@/core/components/Seo'
import AppLayout from '@/core/components/layouts/AppLayout'
import BasicLayout from '@/core/components/layouts/BasicLayout'
import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import addressApi from '@/lib/address/api/addressApi'
import EditAddressComponent from '@/lib/address/components/EditAddress'
import IsAuth from '@/lib/auth/components/IsAuth'

export default function EditAddress({ id, defaultValues }) {
  return (
    <IsAuth>
      <Seo title='Address - Indoteknik.com' />

      <MobileView>
        <AppLayout title='Ubah Alamat'>
          <EditAddressComponent id={id} defaultValues={defaultValues} />
        </AppLayout>
      </MobileView>

      <DesktopView>
        <BasicLayout>
          <EditAddressComponent id={id} defaultValues={defaultValues} />
        </BasicLayout>
      </DesktopView>
    </IsAuth>
  )
}

export async function getServerSideProps(context) {
  const { id } = context.query
  const address = await addressApi({ id })
  const defaultValues = {
    type: address.type,
    name: address.name,
    email: address.email,
    mobile: address.mobile,
    street: address.street,
    zip: address.zip,
    city: address.city?.id || '',
    oldDistrict: address.district?.id || '',
    district: '',
    oldSubDistrict: address.subDistrict?.id || '',
    subDistrict: ''
  }
  return { props: { id, defaultValues } }
}